Poka-Yoke in UI design

As I mentioned before forgiveness is very important principle in UI design. But error prevention is even more important – whenever possible try to prevent an error instead of recovering from it. Preventing an error to happen is known as Poka-Yoke principle. The first time I heard of it was in the book Designing for Interaction by Dan Saffer, but it is just another term for “fail-safe”.

The purpose of Poka-Yoke is, according to Wikipedia “to eliminate product defects by preventing, correcting, or drawing attention to human errors as they occur. The concept was formalized, and the term adopted, by Shigeo Shingo as part of the Toyota Production System. It was originally described as baka-yoke, but as this means “fool-proofing” (or “idiot-proofing”) the name was changed to the milder poka-yoke.”

If you search for Poka-Yoke you will find some nice examples such as 3.5″ floppy disks, where the shape of disks prevents people from inserting them improperly. But Poka-Yoke can be used in user interface design as well. Applying it to UI design means to prevent an error using constraints and correction, and to warn/inform users about the reasons for prevention.

Prevent actions and disable elements

Naturally, forms are ideal for applying Poka-Yoke. Its most obvious usage is preventing an action to begin until all of the conditions necessary to perform that action are met. For instance, don’t allow form submission until all required fields are filled in. Disable submit button if input field is empty. Disable Delete all link if less than two items in the list are selected. Examples are numerous.

I’d recommend you to read (a bit old but good) discussion on ixda.org Hiding and Disabling Menu Items.

Restrict user’s input

You can restrict user’s input in many ways – allow only numeric characters, disallow special characters, limit user’s input to a specific range or limit the size of user’s input. This is usually done by rejecting user’s input if invalid characters are detected. You should always make clear to the user why rejection happened (e.g. “You can enter only numbers”). Plugins like alphanumeric can be a good choice here.

Mask user’s input

Similar to previous technique, masking forces users to enter information in a specific format. It is a good practice to reveal mask in input field upfront and make it clear to the user which format is allowed. The problem with masking is that help text is not always clear enough – would users know what “~9.99 ~9,999.99” means? In case when masking pattern is not easily understandable, it is better to show users an example of usage.

Correct user’s input

In some cases, the application will be able to correct the user’s input automatically without interrupting her/him. For instance, the application can automatically add “http://” to an URL if user omitted it. Another example is when user enters a value that is larger than maximum allowed. In this case the application can replace the user’s input with maximum allowed value while letting the user accept it or change to another value.

Other helpful techniques

Use defaults

In some cases defaults can help further in error prevention. If user wants to book a flight and have to choose a number of passengers, you can set 1 as default (instead of leaving this field empty which will trigger validation later). Another good example I can think of is my android-based mobile phone. Each time user starts a new SMS message, upper-case button is turned on. When user types the first letter it turns off.

Use appropriate controls

Another good way to provide fail safe is to use specialized controls. Instead of using input fields for dates, use date picker controls and disable associated input fields.

Conclusion

Those were just some of the examples of how to apply Poka-Yoke in user interface design. The important thing to remember is that whenever an error is detected, make sure you provide a clear explanation of why the process is stopped.